import React, {forwardRef, useEffect, useRef} from 'react';
import TitleBar from '../title-bar/title-bar';
import HeadBar from '../head-bar/head-bar';
import './index.scss';
import * as echarts from "echarts/core";
import ReactECharts from "echarts-for-react";
import {SafetyGaugeItem} from "../safety-gauge";

export interface HomepageLeftPanelProps {
  /**
   * 组件宽度
   */
  width?: string | number;

  /**
   * 组件高度
   */
  height?: string | number;

  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  /**
   * 流量预测组件配置
   */
  trafficFlowPrediction?: {
    statusBar?: {
      title?: string;
      subtitle?: string;
    };
    dataStats?: any;
    dayChartTitle?: {
      title?: string;
    };
    lineChart?: any;
  };

  /**
   * 交通运力面板配置
   */
  trafficCapacityPanel?: {
    statusBar?: {
      title?: string;
      subtitle?: string;
    };
    trafficChart?: any;
  };

  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const HomepageLeftPanel = forwardRef<HTMLDivElement, HomepageLeftPanelProps>((props, ref) => {
  const {
    width = 500,
    height = 1080,
    topData = [
      { title: '累计进展人数', value: '17788' },
      { title: '累计出站人数', value: '17788' },
      { title: '剩余发送人数', value: '17788' }
    ],
    items = [
      { percentage: 85, label: '候车厅' },
      { percentage: 92, label: '到达层' },
      { percentage: 78, label: '出租车' },
      { percentage: 88, label: '地铁' },
      { percentage: 75, label: '长运' },
      { percentage: 90, label: '网约车' }
    ],
    renyuanData = [
      { icon: 'http://localhost:8085/static/images/shouye/ren-icon-one.png', title: '候车大厅', value: 870110, unit: '人' },
      { icon: 'http://localhost:8085/static/images/shouye/ren-icon-two.png', title: '地铁', value: 870110, unit: '人' },
      { icon: 'http://localhost:8085/static/images/shouye/ren-icon-three.png', title: '到达层', value: 870110, unit: '人' },
      { icon: 'http://localhost:8085/static/images/shouye/ren-icon-four.png', title: '长运', value: 870110, unit: '人' },
      { icon: 'http://localhost:8085/static/images/shouye/ren-icon-five.png', title: '出租车', value: 870110, unit: '人' },
      { icon: 'http://localhost:8085/static/images/shouye/ren-icon-six.png', title: '网约车', value: 870110, unit: '人' },
    ],
    noResponsiveScale = true,
    style = {},
    className = '',
    trafficFlowPrediction = {},
    trafficCapacityPanel = {},
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props
  const componentStyle: React.CSSProperties = {
    width: '500px',
    height: '1080px',
    ...style
  };
  const barChartRef = useRef<HTMLDivElement>(null);
  // 创建单个仪表盘的配置
  const createGaugeOption = (item: SafetyGaugeItem) => {
    const safePercentage = Math.max(0, Math.min(100, item.percentage));
    return {
      series: [
        // 最外层两侧弧度显示颜色
        {
          type: "gauge",
          radius: "98%",
          center: ["50%", "50%"],
          min: 0,
          max: 100,
          startAngle: 180,
          endAngle: 0,
          splitNumber: 2,
          axisLine: {
            lineStyle: {
              width: 2,
              color: [[1, new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(0, 0, 0, 0)' },
                { offset: 0.5, color: 'rgba(0, 139, 255, 1)' },
                { offset: 1, color: 'rgba(0, 0, 0, 0)' }
              ])]],
            },
          },
          axisTick: {
            show: true,
            splitNumber: 1,
            length: 3 ,
            distance: 26,
            lineStyle: {
              width: 0.5,
              color: 'rgba(0, 255, 241, 1)'
            }
          },
          splitLine: { show: false },
          axisLabel: {
            show: false,
          },
          pointer: { show: false },
          detail: { show: false },
        },
        // 内侧满色半圆
        {
          type: "gauge",
          radius: "40%",
          center: ["50%", "50%"],
          min: 0,
          max: 100,
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            lineStyle: {
              width: 60,
              color: [
                [1, new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(0, 139, 255, 0.5)' },
                  { offset: 1, color: 'rgba(0, 191, 255, 0.5)' }
                ])]
              ]
            },
          },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          pointer: { show: false },
          detail: { show: false },
        },
        // 主色圆弧
        {
          type: "gauge",
          radius: "80%",
          center: ["50%", "50%"],
          min: 0,
          max: 100,
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            lineStyle: {
              width: 10,
              color: [
                [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#2A83E4' },
                  { offset: 0.56, color: '#008BFF' },
                  { offset: 1, color: '#00FFF1' }
                ])],
              ]
            },
          },
          pointer: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          detail: { show: false },
        },
        // 中心指针
        {
          type: "gauge",
          radius: "90%",
          center: ["50%", "50%"],
          min: 0,
          max: 100,
          startAngle: 180,
          endAngle: 0,
          axisLine: { show: false },
          pointer: {
            show: true ,
            icon: 'triangle',
            length: '60%', // 设置长度以适应设计
            width: 5, // 可以设置更宽的指针
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0.66, 0.76, 0.34, 0.24, [
                { offset: 0, color: '#0F3A62' },
                { offset: 1, color: '#41FFD6' }
              ]),
              borderColor: "#4EE2E9",
              borderWidth: 1,
            },
          },
          data: [{value: safePercentage, name: ''}],
          // itemStyle: {
          //   color: new echarts.graphic.LinearGradient(0.66, 0.76, 0.34, 0.24, [
          //     { offset: 0, color: '#0F3A62' },
          //     { offset: 1, color: '#41FFD6' }
          //   ]),
          //   borderColor: "#4EE2E9",
          //   borderWidth: 1,
          // },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          detail: { show: false },
          title: { show: false },
        },
        {
          type: "pie",
          radius: "7%",
          center: ["50%", "50%"],
          label: { show: false },
          data: [
            {
              value: 0,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                  { offset: 0, color: '#2B8CE6' },
                  { offset: 1, color: '#41FFD6' }
                ]),
              }
            }
          ]
        },
        {
          type: 'gauge',
          center: ['45%', '48%'],
          startAngle: 190,
          endAngle: -10,
          min: 0,
          zlevel: 10,
          max: 100,
          splitNumber: 12,
          progress: { show: false },
          pointer: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: {
            show: true,
            distance: -19,
            formatter: function (value) {
              if (value === 0) {
                return value;
              }
              return '';
            },
            color: '#B9DFFF',
            fontSize: 14,
          },
          anchor: { show: false },
          detail: { show: false },
          data: [{ value: 0 }],
        },
        // 内圈
        {
          radius: "60%",
          type: 'gauge',
          center: ['50%', '50%'],
          startAngle: 180,
          endAngle: 0,
          min: 0,
          zlevel: 10,
          max: 100,
          progress: { show: false },
          pointer: { show: false },
          axisLine: {
            lineStyle: {
              width: 1,
              color: [
                [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: 'rgba(0,139,255,0)' },
                  { offset: 0.1, color: 'rgba(0,139,255,0.5)' },
                  { offset: 0.5, color: 'rgba(0,139,255,1)' },
                  { offset: 0.9, color: 'rgba(0,139,255,0.5)' },
                  { offset: 1, color: 'rgba(0,139,255,0)' }
                ])],
              ]
            },
          },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: {
            show: false,
          },
        },
      ]
    };
  };
  useEffect(() => {
    const barChartInstance = echarts.init(barChartRef.current);
    if (barChartRef.current) {
      const barOption = {
        grid: {
          left: '10%',
          right: '4%',
          top: '18%',
          bottom: '35%',
        },
        legend: {
          top: '0', // 顶部位置
          right: '4%', // 右侧位置
          icon: 'roundRect',
          itemHeight: 8,
          itemWidth: 8,
          textStyle: {
            fontSize: 12,
            color: 'rgba(255, 255, 255, 0.8)'
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisTick: {
            show: false
          },
          axisLine: {
            onZero: false,
            lineStyle: {
              type: 'solid',
              fontSize: 14,
              color: 'rgba(255, 255, 255, 0.80)',
            },
          },
          axisLabel: {
            interval: 0,
            rotate: -55
          },
          data: ['钱投-东区', '钱投-西区', '高架层商业', '出租车通道', '10-11', '11-12', '12-13点', '13-14点', '14-15点', '16-17点'],

        },
        yAxis: {
          type: 'value',
          splitNumber: 3,
          name: '(人)',
          nameTextStyle: {
            align: 'right'
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              fontSize: 14,
              color: 'rgba(255, 255, 255, 0.80)',
            },
          },
          splitLine: {
            showMinLine: false,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255,255,255,0.1)',
            },
          }
        },
        series: [
          {
            name: '进站人数',
            type: 'bar',
            data: [220, 182, 191, 234, 290, 330, 344, 254, 213, 321, 222, 123,222],
            symbol: 'none',
            barWidth: 6,
            barGap: '50%',
            itemStyle: {
              borderRadius: [2, 2, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(42, 156, 255, 1)' },
                { offset: 1, color: 'rgba(42, 156, 255, 0)' },
              ])
            },
          },
          {
            name: '出站人数',
            type: 'bar',
            data: [220, 182, 191, 234, 290, 330, 344, 254, 213, 321, 222, 123,222],
            symbol: 'none',
            barWidth: 6,
            barGap: '50%',
            itemStyle: {
              borderRadius: [2, 2, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(88, 255, 246, 1)' },
                { offset: 1, color: 'rgba(0, 255, 241, 0)' },
              ])
            },
          },
        ],
      };
      barChartInstance.setOption(barOption);
    }
    window.addEventListener('resize', () => barChartInstance.resize());
    return () => {
      barChartInstance.dispose()
    };
  })
  const classNames = [
    'hzdz-homepage-left-panel',
    noResponsiveScale ? 'no-responsive-scale' : '',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={classNames}
      style={componentStyle}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="top-wrap">
        <TitleBar title="运营现状" subtitle="Operation Status" />
        <div className="content-wrap">
          <div className="top-area">
            {topData.map((middle, index) => (
              <div className="top-item">
                <div className="top-title">{middle.title}</div>
                <div className="value">{middle.value}</div>
              </div>
            ))}
          </div>
          <HeadBar title="小时运力图" />
          <div className="bar-chart-area">
            <div className="chart-container" ref={barChartRef} style={{ width: '100%', height: '216px'}}>
            </div>
          </div>
        </div>
        <div className="bottom-line" />
      </div>
      <div className="bottom-wrap">
        <TitleBar title="空间安全" subtitle="Space Security" rightIcon="http://localhost:8085/static/images/shouye/title-right-icon.png" />
        <div className="content-wrap">
          <div className="yibiao-area">
            {items.map((item, index) => (
              <div
                key={index}
                className="gauge-item"
              >
                <ReactECharts
                  option={createGaugeOption(item)}
                  style={{ height: '100%', width: '100%'}}
                />
                <div className="info">
                  <div className="percentage-wrapper">
                    <div className="percentage">{item.percentage}%</div>
                  </div>
                  <div className="title">{item.label}</div>
                </div>
              </div>
            ))}
          </div>
          <HeadBar title="人员密度饱和度" />
          <div className="renyuan-area">
            {renyuanData.map((ren, index) => (
              <div className="ren-item">
                <div className="ren-icon" style={{backgroundImage: `url(${ren.icon})`}} />
                <div className="ren-right">
                  <div className="title">{ren.title}</div>
                  <div className="value-bg">
                    <div className="value">{ren.value}</div>
                    <div>{ren.unit}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="bottom-line" />
      </div>
    </div>
  );
})
HomepageLeftPanel.displayName = 'HomepageLeftPanel';

export default HomepageLeftPanel;
